<template>
  <a-drawer
    :width="500"
    :visible="props.visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title> 指标申诉 </template>
    <a-form
      :model="formData"
      ref="refForm"
      :rules="rules"
      :label-col-props="{ span: 6, offset: 0 }"
      :wrapper-col-props="{ span: 18, offset: 0 }"
      :layout="'vertical'"
    >
      <a-form-item field="ss">
        <template #label>
          <div class="title">申诉说明</div>
        </template>
        <div style="width: 100%">
          <a-form-item label="申诉理由" field="returnReason" show-colon>
            <div
              style="
                border: 1px solid #eee;
                min-height: 60px;
                width: 100%;
                padding: 5px;
              "
            >
              {{ formData.returnReason }}
            </div>
          </a-form-item>
          <!-- <a-form-item label="申诉凭证" field="returnReason" show-colon>
            <div
              style="
                border: 1px solid #eee;
                min-height: 60px;
                width: 100%;
                padding: 5px;
              "
            >
              {{ formData.returnReason }}
            </div>
          </a-form-item> -->
        </div>
      </a-form-item>
      <a-form-item>
        <template #label>
          <div class="title">申诉审核</div>
        </template>
        <div style="width: 100%">
          <a-form-item label="是否通过" show-colon>
            <a-space :direction="'vertical'" :size="'large'">
              <a-space>
                <a-button
                  :disabled="display"
                  :type="formData.state === 5 ? 'primary' : undefined"
                  :status="formData.state === 5 ? 'success' : undefined"
                  @click="formData.state = 5"
                  >通过</a-button
                >
                <a-button
                  :disabled="display"
                  :type="formData.state === 6 ? 'primary' : undefined"
                  :status="formData.state === 6 ? 'danger' : undefined"
                  @click="formData.state = 6"
                  >驳回</a-button
                >
              </a-space>
              <a-space v-show="formData.state === 5">
                <a-space :direction="'vertical'" fill>
                  <a-space v-if="props.showInputValue">
                    <span>录入值</span>
                    <a-input-number
                      :disabled="display"
                      hide-button
                      v-model="formData.inputValue"
                    />
                  </a-space>
                  <div style="width: 100%" v-if="props.showIndexName">
                    <a-table
                      :columns="columns"
                      :data="formData.personnelKeyResultsIndexLibrary"
                      stripe
                      :pagination="false"
                    >
                      <template #result="{ record }">
                        {{ record.result }}
                      </template>
                      <template #scorer="{ record }">
                        <a-space :direction="'vertical'" align="end">
                          <a-space
                            v-for="scorer in record.scorer"
                            :key="scorer.id"
                          >
                            <template v-if="scorer.type !== 5">
                              <span>{{ scorer.userName }}</span>
                              <a-input-number
                                hide-button
                                :disabled="display"
                                v-model="scorer.score"
                              />
                            </template>
                          </a-space>
                        </a-space>
                      </template>
                    </a-table>
                  </div>
                  <div style="width: 100%" v-else>
                    <a-table
                      :columns="columns"
                      :data="formData.scorer.filter((item) => item.type !== 5)"
                      stripe
                      :pagination="false"
                    >
                      <template #scorer="{ record }">
                        <a-space :direction="'vertical'" align="end">
                          <a-space :size="'large'">
                            <template v-if="record.type !== 5">
                              <span>{{ record.userName }}</span>
                              <a-select
                                v-if="formData.scoreType === 1"
                                v-model="record.whetherViolate"
                                :disabled="display"
                              >
                                <a-option :value="false">通过</a-option>
                                <a-option :value="true">不通过</a-option>
                              </a-select>
                              <a-input-number
                                v-else
                                hide-button
                                :disabled="display"
                                v-model="record.score"
                              />
                            </template>
                          </a-space>
                        </a-space>
                      </template>
                    </a-table>
                  </div>
                  <div style="color: #a8a7a7">
                    注：该指标是实际值录入公式计算的就显示实际值可录入，指标为评分直接输入的就显示评分录入
                  </div>
                </a-space>
              </a-space>
            </a-space>
          </a-form-item>
          <a-form-item label="审核意见" show-colon>
            <a-textarea v-model="formData.auditOpinion" :disabled="display" />
          </a-form-item>
        </div>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import { useVModel } from '@vueuse/core';
import { watch } from 'vue';

const props = withDefaults(
  defineProps<{
    visible: boolean;
    currentHandleData?: any;
    /**
     * 是否显示录入值，默认否
     */
    showInputValue?: boolean;
    /**
     * 不可编辑，默认否
     */
    display?: boolean;
    showIndexName?: boolean;
  }>(),
  {
    showInputValue: false,
    showIndexName: false,
    display: false
  }
);

const emits = defineEmits([
  'update:visible',
  'update:currentHandleData',
  'save'
]);

const handleOk = async () => {
  if (props.display) {
    emits('update:visible', false);
    return;
  }
  emits('save', formData.value);
  emits('update:visible', false);
};
const handleCancel = () => {
  emits('update:visible', false);
};
const rules = reactive({
  returnReason: [
    {
      required: true,
      message: '请输入'
    }
  ]
});
const formData = ref<any>();
watch(
  () => props.visible,
  (val) => {
    if (val) {
      formData.value = cloneDeep(props.currentHandleData);
    }
  }
);
const columns = computed(() => {
  let colArr = [
    {
      title: '评分人',
      dataIndex: 'scorer',
      slotName: 'scorer'
    }
  ];
  if (props.showIndexName) {
    colArr.unshift({
      title: '成果名称',
      dataIndex: 'result',
      slotName: 'result'
    });
  }
  return colArr;
});
</script>
<style lang="less" scoped>
.title {
  font-weight: 600;
  font-size: 14px;
  // background: #f5f7fb;
  // padding: 5px 0;
  // margin-bottom: 10px;
  display: flex;
  align-items: center;
  &::before {
    content: '';
    margin: 0 5px;
    display: inline-block;
    width: 3px;
    height: 12px;
    border-left: #409efe solid 1px;
    background: #409efe;
  }
  .title-right {
    flex: 1;
    text-align: right;
  }
}
</style>
